<div ng-switch="configDefinition.type" class="config_{{configDefinition.name}}">
  <div ng-switch-when="BOOLEAN">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'booleanConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="NUMBER">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="STRING">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="CREDENTIAL">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elCredentialConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="CHARACTER">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'characterConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_STRING" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_CREDENTIAL" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elCredentialConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_NUMBER" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_DATE" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_BOOLEAN" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_OBJECT" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="LIST"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'listConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="MAP"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'mapConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="TEXT"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'textConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="MODEL"
       ng-switch="configDefinition.model.modelType">

    <div ng-switch-when="VALUE_CHOOSER" ng-if="!configDefinition.connectionType">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'valueChooserConfigurationTemplate'"></ng-include>
    </div>

    <div ng-switch-when="MULTI_VALUE_CHOOSER">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'multiValueChooserConfigurationTemplate'"></ng-include>
    </div>

    <div ng-switch-when="FIELD_SELECTOR_MULTI_VALUE"
         ng-click="onFieldSelectorFocus(detailPaneConfig)"
         class="clearfix">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'fieldSelectorMultiValuedConfigurationTemplate'"></ng-include>
    </div>

    <div ng-switch-when="FIELD_SELECTOR"
         ng-click="onFieldSelectorFocus(detailPaneConfig)"
         class="clearfix">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'fieldSelectorSingleValuedConfigurationTemplate'"></ng-include>
    </div>

    <div ng-switch-when="PREDICATE"
         ng-click="onFieldSelectorFocus(detailPaneConfig)">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'lanePredicateMappingConfigurationTemplate'"></ng-include>
    </div>


    <div ng-switch-when="LIST_BEAN" class="clearfix"
         ng-init="bulkEdit=(detailPaneConfig.configuration[configIndex].value.length > 50)">
      <ng-include ng-if="configDefinition.label" src="'labelConfigurationTemplate'"></ng-include>

      <div class="controls" ng-class="configDefinition.label ? 'col-md-7' : 'col-md-12'">

        <span class="empty-value"
              ng-if="isPipelineReadOnly && (!detailPaneConfig.configuration[configIndex].value || detailPaneConfig.configuration[configIndex].value.length === 0)">--</span>

        <table class="table" ng-if="_.size(configDefinition.model.configDefinitions) <= 4 && !bulkEdit">
          <thead>
          <tr>
            <th class="custom-field-property"
                ng-repeat="customFieldConfigDefinition in configDefinition.model.configDefinitions | orderBy: 'displayPosition'"
                ng-class="{'output-lane': $index === 0 && configDefinition.name === detailPaneConfigDefn.outputStreamsDrivenByConfig}"
                ng-if="isShownByConfigDisplayMode(customFieldConfigDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)">
              <span>{{customFieldConfigDefinition.label}}</span>
              <i class="fa fa-info-circle help-icon"
                 ng-if="customFieldConfigDefinition.description"
                 tooltip-placement="right"
                 tooltip-append-to-body="false"
                 tooltip="{{customFieldConfigDefinition.description}}"
                 tooltip-trigger="mouseenter"></i>
            </th>
            <th class="custom-field-buttons"></th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="customFieldValue in customeFieldValueList = detailPaneConfig.configuration[configIndex].value track by $index"
              ng-init="parentConfigIndex=configIndex; configIndex = $index">

            <td ng-repeat="customFieldConfigDefinition in configDefinition.model.configDefinitions | orderBy: 'displayPosition'">

              <div ng-if="$index === 0 && configDefinition.name === detailPaneConfigDefn.outputStreamsDrivenByConfig">
                <label class="output-lane-value">{{configIndex + 1}}</label>
              </div>

              <div ng-if="(verifyCustomFieldDependsOn(detailPaneConfig, customFieldValue, customFieldConfigDefinition)) && !($index === 0 && configDefinition.name === detailPaneConfigDefn.outputStreamsDrivenByConfig) && isShownByConfigDisplayMode(customFieldConfigDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)">
                <ng-include src="'app/home/detail/configuration/listBeanConfiguration.tpl.html'"></ng-include>
              </div>
            </td>

            <td>
              <div class="btn-group" role="group" aria-label="Default button group" ng-hide="isPipelineReadOnly || isPipelineRunning">
                <button type="button" class="btn btn-default"
                        ng-hide="configDefinition.name === detailPaneConfigDefn.outputStreamsDrivenByConfig && detailPaneConfig.configuration[configIndex].value.length === 1"
                        ng-click="removeFromCustomField(detailPaneConfig, detailPaneConfig.configuration[parentConfigIndex], customeFieldValueList, $index)">
                  <i class="fa fa-minus pointer"></i>
                </button>
                <button type="button" class="btn btn-default"
                        ng-show="$last"
                        ng-click="addToCustomField(detailPaneConfig, detailPaneConfig.configuration[parentConfigIndex], configDefinition.model.configDefinitions)">
                  <i class="fa fa-plus pointer"></i>
                </button>
              </div>
            </td>

          </tr>
          </tbody>
        </table>

        <table class="table table-bordered" ng-if="_.size(configDefinition.model.configDefinitions) > 4 && !bulkEdit">
          <tbody>
          <tr ng-repeat="customFieldValue in customeFieldValueList = detailPaneConfig.configuration[configIndex].value track by $index"
              ng-init="parentConfigIndex=configIndex; configIndex = $index">

            <td>
              <div class="form-group "
                   ng-repeat="customFieldConfigDefinition in configDefinition.model.configDefinitions | orderBy: 'displayPosition'"
                   ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, customFieldConfigDefinition).length > 0}"
                   ng-if="(verifyCustomFieldDependsOn(detailPaneConfig, customFieldValue, customFieldConfigDefinition)) && isShownByConfigDisplayMode(customFieldConfigDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)">

                <label class="col-lg-3 control-label">{{customFieldConfigDefinition.label}}
                  <i class="fa fa-info-circle help-icon"
                     tooltip-placement="right"
                     tooltip-append-to-body="false"
                     tooltip="{{customFieldConfigDefinition.description || customFieldConfigDefinition.label}}"
                     tooltip-trigger="mouseenter"></i>
                </label>

                <div class="controls col-lg-9">
                  <ng-include src="'app/home/detail/configuration/listBeanConfiguration.tpl.html'"></ng-include>
                  <ng-include src="'complexConfigurationIssuesTemplate'"></ng-include>
                </div>
              </div>
            </td>

            <td>
              <div class="btn-group" role="group" aria-label="Default button group" ng-hide="isPipelineReadOnly || isPipelineRunning">
                <button type="button" class="btn btn-default"
                        ng-click="removeFromCustomField(detailPaneConfig, detailPaneConfig.configuration[parentConfigIndex], customeFieldValueList, $index)">
                  <i class="fa fa-minus pointer"></i>
                </button>
                <button type="button" class="btn btn-default"
                        ng-show="$last"
                        ng-click="addToCustomField(detailPaneConfig, detailPaneConfig.configuration[parentConfigIndex], configDefinition.model.configDefinitions)">
                  <i class="fa fa-plus pointer"></i>
                </button>
              </div>
            </td>

          </tr>

          </tbody>
        </table>

        <div ui-codemirror
             ng-if="bulkEdit"
             class="codemirror-editor"
             ng-class="{'codemirror-read-only': isPipelineReadOnly || isPipelineRunning}"
             focus-me="{{autoFocusConfigName === configDefinition.name}}"
             ng-model="detailPaneConfig.configuration[configIndex].value"
             ui-refresh="refreshCodemirror"
             ui-codemirror-opts="getCodeMirrorOptions({
                readOnly: (isPipelineReadOnly || isPipelineRunning),
                autofocus: autoFocusConfigName === configDefinition.name,
                lineNumbers: true
              }, configDefinition)"
             codemirror-el
             field-paths="fieldPaths"
             d-field-paths="dFieldPaths"
             data-type="'LIST'">
        </div>

        <button type="button" class="btn btn-default btn-sm"
                ng-if="(!detailPaneConfig.configuration[configIndex].value || detailPaneConfig.configuration[configIndex].value.length === 0) || bulkEdit"
                ng-hide="isPipelineReadOnly || isPipelineRunning"
                ng-click="addToCustomField(detailPaneConfig, detailPaneConfig.configuration[configIndex], configDefinition.model.configDefinitions)">
          <i class="fa fa-plus pointer"></i>
        </button>

        <div class="pull-right field-selector-btn" ng-hide="isPipelineReadOnly || isPipelineRunning || configDefinition.name === detailPaneConfigDefn.outputStreamsDrivenByConfig">
          <button type="button" class="btn btn-link"
                  ng-click="bulkEdit = !bulkEdit">
            {{bulkEdit ? ('home.detailPane.configurationTab.switchToSimpleMode' | translate) : ('home.detailPane.configurationTab.switchToBulkMode' | translate)}}
          </button>
        </div>

        <div class="help-block">
          <div ng-repeat="issue in getConfigurationIssues(detailPaneConfig, configDefinition)">
            <span>{{issue.message}}</span>
            <span ng-show="issue.count > 1" class="badge">{{issue.count}}</span>
          </div>
        </div>

      </div>

    </div>

  </div>


</div>
